<template>
  <div class="contract" v-show="message">
    <div class="top">
      <div class="top-a">
        <p class="top-p1">
          {{ $t("common.zongzichan")
          }}<img @click="change" src="../assets/images/zc1.png" alt="" />
        </p>
        <p class="top-p1">
          <img
            src="../assets/images/zc2.png"
            alt=""
            @click="goHyhistory"
            class="top-img"
          />
        </p>
      </div>
      <div class="top-b">
        <p class="top-p2">
          {{ getIsEncryption ? "*****" : $formatMoney(message.total, 2) || 0 }}
        </p>
        <span>USDT</span>
      </div>
    </div>
    <div class="content">
      <div class="contenta">
        <div class="left">
          <p class="p1" @click="bond">{{ $t("common.zhanyongedu") }}(USDT)</p>
          <p class="p2">
            {{
              getIsEncryption
                ? "*****"
                : $formatMoney(message.positionMargin, 2) || 0
            }}
          </p>
        </div>
        <div class="right">
          <p class="p1" @click="wallet">{{ $t("common.keyongedu") }}(USDT)</p>
          <p class="p2">
            {{
              getIsEncryption
                ? "*****"
                : $formatMoney(message.available, 2) || 0
            }}
          </p>
        </div>
      </div>
      <div class="contentb">
        <div class="left">
          <p class="p1" @click="profit">
            {{ $t("common.weishixianyingkui") }}(USDT)
          </p>
          <p class="p2">
            {{ getIsEncryption ? "*****" : message.floatProfit || 0 }}
          </p>
        </div>
        <div class="right">
          <p class="p1" @click="freeze">{{ $t("common.dongjie") }}(USDT)</p>
          <p class="p2">
            {{
              getIsEncryption ? "*****" : $formatMoney(message.frozen, 2) || 0
            }}
          </p>
        </div>
      </div>
      <van-button type="info" @click="goTransfer" class="btn">{{
        $t("common.huazhuan")
      }}</van-button>
    </div>
    <div class="title" v-show="currentPositionList.length">
      <p>{{ $t("common.chiyoucangwei") }}({{ currentPositionList.length }})</p>
    </div>
    <div class="pbox">
      <div class="lbox" v-for="item in currentPositionList" :key="item.id">
        <Position
          :hideSomes="2"
          :detail="item"
          :curyType="curyType"
          :getUserInfo="getUserInfo"
          @shareImg="shareImg"
          @showZhangTip="showZhangTip"
        />
      </div>
      <ShareImg ref="shareImg" />
    </div>
    <van-dialog v-model="zhangTipShow" class="oneflatshow">
      <div class="fscon">
        <div class="fsbox">
          <div class="fs1">{{ $t("common.chicangzhangshu") }}</div>
          <div class="fs2">
            {{
              $formatMoney(
                parseInt(zhangTipDetail.nowNum * zhangTipDetail.sheet),
                11
              )
            }}
          </div>
        </div>
        <div class="fsbox">
          <div class="fs1">{{ $t("common.chicangbishu") }}</div>
          <div class="fs2">
            {{ zhangTipDetail.nowNum }} {{ zhangTipDetail.tokenCurName }}
          </div>
        </div>
        <div class="fsbox" style="width: 100%; flex: 1">
          <div class="fs1">{{ $t("common.chicangjiazhi") }}</div>
          <div class="fs2">
            {{ $formatMoney(zhangTipDetail.uNowNum, 10) }}
            {{ zhangTipDetail.mainCurName }}
          </div>
        </div>
      </div>
      <div class="xbutton" style="margin-top: 0 !important; width: 50vw">
        <button class="btn2" @click="zhangTipShow = false" style="width: 100%">
          {{ $t("common.queding") }}
        </button>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { mapGetters } from "vuex";
import ShareImg from "../views/aliContract/components/shareImg.vue";
import Position from "../views/aliContract/components/position.vue";
export default {
  props: ["message", "currentPositionList"],
  computed: {
    ...mapGetters(["getIsEncryption", "getUserInfo"]),
  },
  components: {
    Position,
    ShareImg,
  },
  data() {
    return {
      zhangTipDetail: {},
      zhangTipShow: false,
      curyType: "main",
    };
  },
  activated() {
    this.curyType = localStorage.getItem("curyType") || "main";
  },
  methods: {
    showZhangTip(item) {
      this.zhangTipDetail = item;
      this.zhangTipShow = true;
    },
    shareImg(detail) {
      this.$refs.shareImg.showShare(detail, this.getUserInfo);
    },
    change() {
      this.$store.commit("changeIsEncryption");
    },
    goHyhistory() {
      this.$router.push({
        path: "/aliHistory",
        query: {
          curyType: "token",
        },
      });
    },
    bond() {
      Dialog.alert({
        title: this.$t("common.zhanyongedu"),
        message: this.$t("common.lie_one2"),
        confirmButtonText: this.$t("common.haode"),
        theme: "round-button",
      }).then(() => {
        // on close
      });
    },
    wallet() {
      Dialog.alert({
        title: this.$t("common.keyongedu"),
        message: this.$t("common.lie_two2"),
        confirmButtonText: this.$t("common.haode"),
        theme: "round-button",
        messageAlign: "left",
      }).then(() => {
        // on close
      });
    },
    profit() {
      Dialog.alert({
        title: this.$t("common.weishixianyingkui"),
        message: this.$t("common.lie_three"),
        confirmButtonText: this.$t("common.haode"),
        theme: "round-button",
        messageAlign: "left",
      }).then(() => {
        // on close
      });
    },
    freeze() {
      Dialog.alert({
        title: this.$t("common.dongjie"),
        message: this.$t("common.lie_four"),
        confirmButtonText: this.$t("common.haode"),
        theme: "round-button",
      }).then(() => {
        // on close
      });
    },
    guaranteeconfirm() {
      this.guaranteeshow = false;
    },
    add() {
      this.guaranteeshow = true;
    },
    goTransfer() {
      localStorage.setItem("zh", 2);
      this.$router.push("/transfer");
    },
    popovers6(val) {
      this.popover6 = this.popoverzz6[val];
      this.popoverz6 = val;
      this.popovershow6 = false;
      this.popovershows = false;
    },
    popoverss() {
      this.popovershows = false;
      this.popovershow6 = false;
    },
    chicangtz() {
      Dialog.alert({
        title: this.$t("common.chicangshuliang"),
        message: this.$t("long.tip_chicangshuliang"),
        confirmButtonText: this.$t("common.haode"),
        theme: "round-button",
        messageAlign: "left",
      }).then(() => {
        // on close
      });
    },
  },
};
</script>

<style scoped lang="scss">
.contract {
  margin: 0;
  padding: 0;
  min-height: 35vw;
  width: 100vw;
  background-color: #090A1B;
  overflow-x: hidden;
  .top {
    background-color: #090A1B;
    border-bottom: 1px solid rgba(51, 53, 64, 100);
    .top-a {
      height: 17vw;
      display: flex;
      justify-content: space-between;
      font-size: 3.7vw;
      margin: 0 3.4vw;
      color: rgba(135, 139, 151, 100);
      background-color: #090A1B;
      .top-p1 {
        margin-top: 6.4vw;
        img {
          margin-left: 1.06vw;
          position: relative;
          top: 0.5vw;
          height: 3.73vw;
          width: 3.73vw;
        }
        .top-img {
          height: 5.33vw;
          width: 5.33vw;
        }
      }
    }
    .top-b {
      height: 18vw;
      background-color: #090A1B;
      display: flex;
      font-weight: 600;
      .top-p2 {
        font-size: 6.6vw;
        margin-left: 3.4vw;
        color: rgba(214, 214, 214, 100);
        margin-top: 3vw;
      }
      span {
        font-size: 3.7vw;
        position: relative;
        top: 5.6vw;
        left: 2.1vw;
        color: rgba(214, 214, 214, 100);
      }
    }
  }
  .content {
    height: 70vw;
    background-color: #090A1B;
    .contenta {
      height: 27.73vw;
      border-bottom: 1px solid rgba(51, 53, 64, 100);
      display: flex;
      .left {
        height: 27.73vw;
        width: 49.33vw;
        border-right: 1px solid rgba(51, 53, 64, 100);
        .p1 {
          color: rgba(135, 139, 151, 100);
          font-size: 3.2vw;
          text-align: left;
          font-family: PingFangSC-regular;
          position: relative;
          top: 7vw;
          left: 3.4vw;
          text-decoration: underline;
          letter-spacing: 0.1vw;
        }
        .p2 {
          color: rgba(255, 255, 255, 100);
          font-size: 3.2vw;
          text-align: left;
          font-family: PingFangSC-regular;
          position: relative;
          top: 10vw;
          margin-left: 3.46vw;
          letter-spacing: 0.1vw;
          font-weight: 600;
        }
      }
      .right {
        height: 27.73vw;
        width: 49.33vw;
        .p1 {
          color: rgba(135, 139, 151, 100);
          font-size: 3.2vw;
          text-align: left;
          font-family: PingFangSC-regular;
          position: relative;
          top: 7vw;
          left: 3.4vw;
          text-decoration: underline;
          letter-spacing: 0.1vw;
        }
        .p2 {
          color: rgba(255, 255, 255, 100);
          font-size: 3.2vw;
          text-align: left;
          font-family: PingFangSC-regular;
          position: relative;
          top: 10vw;
          left: 3.4vw;
          letter-spacing: 0.1vw;
          font-weight: 600;
        }
      }
    }
    .contentb {
      display: flex;
      height: 27.73vw;
      text-align: left;
      .left {
        height: 24vw;
        width: 49.33vw;
        border-right: 1px solid rgba(51, 53, 64, 100);
        .p1 {
          position: relative;
          left: 3.46vw;
          // width: 28vw;
          top: 7vw;
          color: rgba(135, 139, 151, 100);
          font-size: 3.2vw;
          font-family: PingFangSC-regular;
          text-decoration: underline;
          letter-spacing: 0.1vw;
        }
        .p2 {
          position: relative;
          left: 3.46vw;
          top: 10vw;
          color: rgba(255, 255, 255, 100);
          font-size: 3.2vw;
          font-family: PingFangSC-regular;
          letter-spacing: 0.1vw;
          font-weight: 600;
        }
      }
      .right {
        height: 24vw;
        width: 49.33vw;
        .p1 {
          color: rgba(135, 139, 151, 100);
          font-size: 3.2vw;
          text-align: left;
          font-family: PingFangSC-regular;
          position: relative;
          top: 7vw;
          left: 3.4vw;
          text-decoration: underline;
          letter-spacing: 0.1vw;
        }
        .p2 {
          color: rgba(255, 255, 255, 100);
          font-size: 3.2vw;
          text-align: left;
          font-family: PingFangSC-regular;
          position: relative;
          top: 10vw;
          left: 3.4vw;
          letter-spacing: 0.1vw;
          font-weight: 600;
        }
      }
    }
    .van-button--normal {
      width: 91.2vw;
      height: 9.6vw;
      line-height: 5.3vw;
      border-radius: 0.8vw;
      background-color: rgba(53, 57, 69, 100);
      text-align: center;
      border: 1px solid rgba(53, 57, 69, 100);
    }
  }
  .title {
    margin-top: 2.66vw;
    height: 13.86vw;
    background-color: #090A1B;
    border-bottom: 1px solid rgba(45, 47, 59, 100);
    p {
      color: rgba(255, 255, 255, 100);
      font-size: 3.73vw;
      text-align: left;
      font-family: PingFangSC-regular;
      position: relative;
      top: 6.4vw;
      left: 3.46vw;
      background-color: #090A1B;
    }
  }

  ::v-deep .van-overlay {
    z-index: 2003 !important;
    // opacity: 0.4;
  }
  .guaranteeshow {
    box-sizing: border-box;
    padding: 0 4.2vw;
    .guare_top {
      color: #8992AE;
      margin-bottom: 6.4vw;
      border-radius: 3px;
      > p {
        text-align: left;
        font-size: 3.8vw;
        margin-bottom: 2.1vw;
      }
      > div {
        width: 91.4vw;
        height: 10.6vw;
        background-color: #333540;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 3.2vw 0 4.2vw;
        box-sizing: border-box;
        color: #fff;
        font-size: 3.8vw;
        font-weight: 600;
        > span {
          display: flex;
          p {
            margin-right: 4.2vw;
          }
        }
        .guare_topp2 {
          color: #0a7aff;
        }
        .guare_topxian {
          width: 0.26vw;
          height: 3.4vw;
          background-color: #8992AE;
        }
        img {
          width: 4.8vw;
          position: relative;
          top: -0.8vw;
        }
        .van-field {
          padding: 0;
          width: 40vw;
          background-color: #333540;
          ::v-deep .van-field__body {
            .van-field__control {
              background-color: #333540;
              color: #fff;
            }
            .van-field__control::-webkit-input-placeholder {
              color: #8992AE;
            }
          }
        }
        ::v-deep .van-cell::after {
          border-bottom-color: #333540;
        }
      }
    }
    .guare_bottom {
      display: flex;
      justify-content: space-between;
      p {
        margin-bottom: 4.2vw;
      }
      p:first-child {
        font-size: 3.8vw;
        color: #8992AE;
      }
      p:last-child {
        font-weight: 600;
      }
    }
  }
  .allshow {
    background: #090A1B;
    border-radius: 10px 10px 0px 0px;
    h2 {
      font-weight: 500;
      margin: 5.8vw 0 6.9vw;
    }
    .buttonwai {
      display: flex;
      justify-content: space-evenly;
      .button {
        width: 44vw;
        height: 10.6vw;
        background-color: #171A2B;
        color: #d6d6d6;
        border: 0;
        border-radius: 5px;
      }
      .buttona {
        background-color: #090A1B;
        border: 2px solid #0a7aff;
      }
    }
    .hint {
      padding: 0 4vw;
      text-align: left;
      margin: 7vw 0 6vw;
    }
    .contract-content {
      padding: 0 4vw;
      text-align: left;
      color: #8992AE;
      line-height: 6vw;
      p {
        margin-bottom: 2.4vw;
      }
    }
    .confirm {
      width: 92vw;
      height: 10vw;
      margin-top: 8vw;
    }
  }
  .bubble {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 3.8vw;
    position: relative;
    width: 18vw;
    img {
      position: relative;
      top: -0.6vw;
    }

    .bubblexia {
      position: absolute;
      top: 10vw;
      right: -3vw;
      background-color: #171A2B;
      width: 24vw;
      height: 16vw;
      z-index: 4000;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      font-size: 3.2vw;
      border-radius: 2px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .bubblexia1 {
      top: 14vw;
      right: 0;
    }
    .bubblexiabei {
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 3000;
    }
  }
  .shareshow {
    width: 93vw !important;
    height: 142vw !important;
    background-color: #090A1B;
    overflow: hidden;
    :deep(.van-dialog__footer) {
      display: none;
    }

    .button {
      width: 74.4vw;
      height: 9.6vw;
      border-radius: 1.33vw;
      position: absolute;
      bottom: 12.8vw;
      left: 10vw;
    }

    img {
      margin: 0;
    }

    .shareclose {
      width: 4.8vw;
      position: absolute;
      top: 4.2vw;
      right: 4.2vw;
      z-index: 1;
    }

    .sharerocket {
      width: 36.2vw;
      position: absolute;
      top: 6vw;
      right: 0vw;
    }

    .sharecontent1 {
      position: absolute;
      top: 4.8vw;
      left: 4.2vw;
      text-align: left;

      img {
        width: 19.73vw;
        height: 6.93vw;
      }

      p {
        position: relative;
        top: 3.2vw;
        color: rgba(214, 214, 214, 100);
        font-size: 3.2vw;
        letter-spacing: 0.1vw;
      }
    }

    .sharecontent {
      position: absolute;
      top: 40.2vw;
      left: 4.2vw;
      text-align: left;

      .sharectp1 {
        font-size: 4.8vw;
        font-weight: 600;
        margin-bottom: 6.4vw;
      }

      .sharectd1 {
        display: flex;
        align-items: center;
        margin-bottom: 11vw;

        div {
          width: 4.2vw;
          height: 4.2vw;
          line-height: 4.2vw;
          text-align: center;
          background-color: #5eba89;
          border-radius: 2px;
          font-size: 3.2vw;
          margin-right: 4.3vw;
        }

        p {
          font-size: 3.73vw;
          color: rgba(214, 214, 214, 100);
          padding-left: 4.3vw;
          border-left: 0.2vw solid #8992AE;
        }
      }

      .sharectp2 {
        font-size: 3.2vw;
        color: rgba(214, 214, 214, 100);
        margin-bottom: 2.1vw;
      }

      .sharectd2 {
        font-size: 11vw;
        display: flex;
        align-items: flex-start;
        margin-bottom: 10vw;

        span {
          position: relative;
        }

        .updown {
          width: 6.7vw;
          margin-left: 2.1vw;
          margin-top: 2.13vw;
        }
      }

      .red {
        color: #e45360;
        margin-top: 2.13vw;
      }

      .green {
        margin-top: 2.13vw;
        color: #5eba89;
      }

      .sharectd3 {
        display: flex;

        > div {
          margin-right: 8.5vw;

          p {
            margin-bottom: 2.1vw;
            font-weight: 600;
          }
        }
      }
    }
    .picurl {
      position: absolute;
      left: 0;
      top: 0;
      width: 92vw;
      height: 145vw;
    }
    .sharebottom {
      position: absolute;
      bottom: 20px;
      width: 100%;
      height: 75px;
      // background-color: #1f202a;
      display: flex;
      align-items: center;
      .sharema {
        width: 43px;
        height: 43px;
        background-color: #fff;
        margin: 16px;
      }
      .shareright {
        p {
          text-align: left;
          font-weight: 600;
        }
        p:first-child {
          margin-bottom: 6px;
        }
        span {
          color: #0a7aff;
        }
      }
    }
  }
}
.red {
  color: #e45360 !important;
}
.green {
  color: #5eba89 !important;
}
.red2 {
  background-color: #e45360 !important;
}
.green2 {
  background-color: #5eba89 !important;
}
.orange {
  color: orange !important;
}
.cu {
  font-weight: 600 !important;
  color: #fff !important ;
}
.xshuxian {
  display: inline-block !important;
  margin-right: 4px !important;
  width: 3px !important;
  height: 13px;
  border-radius: 2px;
  background: #8992AE;
}
.shuxianlv {
  background: #5eba89;
}
.xxx {
  position: relative;
  top: 5.5vw;
  left: 10.46vw;
}
.pbox {
  padding: 3vw 0;
}
.fscon {
  padding: 6vw 7vw;
  display: flex;
  flex-wrap: wrap;
  .fsbox {
    width: 50%;
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    height: 18vw;
    justify-content: center;
    text-align: left;
    .fs1 {
      color: #8992AE;
      font-size: 3.2vw;
      margin-bottom: 4vw;
    }
    .fs2 {
      color: #fff;
      font-weight: 600;
    }
  }
}
.oneflatshow {
  ::v-deep .van-dialog__footer {
    display: none;
    margin-bottom: 20px;
  }
}
</style>